<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/h5plus.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">h5plus</h1>
		</header>
		<div class="mui-content">
			<!-- 列表 mlist -->
			<ul class="mui-table-view" id="first_ul">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="vibrate">
						震动
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="beep">
						蜂鸣声
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="pick">
						相册
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="camera">
						拍照
					</a>
				</li>
				<li class="mui-table-view-cell" id="contact">
					<a class="mui-navigate-right">
						通讯录
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						扫一扫
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						摇一摇
					</a>
				</li>
			</ul>

			<!-- 相册图片呈现位置 -->
			<div id="img">
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				// 震动 https://www.html5plus.org/doc/zh_cn/device.html#plus.device.vibrate
				document.getElementById("vibrate").addEventListener("tap", function() {
					plus.device.vibrate()
				});

				// 蜂鸣声 https://www.html5plus.org/doc/zh_cn/device.html#plus.device.beep
				document.getElementById("beep").addEventListener("tap", function() {
					plus.device.beep()
				});

				// 相册 https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.pick
				document.getElementById("pick").addEventListener("tap", function() {
					plus.gallery.pick(
						// 单张图片或视频的选择
						// function(path) {
						// 	display(path);
						// },
						function(f) {
							var paths = f.files;
							for (var path of paths) {
								// 显示图片
								display(path);
							}
						},
						function(e) {
							alert("取消选择图片");
						}, {
							/**
							 * 相册选择文件过滤类型
							 * "image":仅可选择图片文件
							 * "video":仅可选择视频文件
							 * "none":不过滤，可选择图片或视频文件
							 */
							filter: "none",
							// 多张图片或视频的选择
							multiple: true
						})
				});

				// 拍照 https://www.html5plus.org/doc/zh_cn/camera.html
				document.getElementById("camera").addEventListener("tap", function() {
					// 获取摄像头对象
					var cmr = plus.camera.getCamera();
					// 分辨率
					var imageResolution = cmr.supportedImageResolutions[0];
					console.log("分辨率" + imageResolution);
					// 格式
					var imageFormat = cmr.supportedImageFormats[0];
					console.log("格式" + imageFormat);
					cmr.captureImage(
						function(rs) {
							/**
							 * eval()函数用于计算JavaScript字符串,并把它作为脚本代码来执行
							 * eval("x=10;y=20;console.log(x*y)");  200
							 * console.log(eval("2+2"));			4
							 * console.log(eval("x+17"));			27
							 */
							var path = "file://" + plus.io.convertLocalFileSystemURL(eval(JSON.stringify(rs)));
							console.log(path);
							// 显示图片
							display(path);
						},
						function(e) {
							alert(e.message + "取消拍照");
						}, {
							resolution: imageResolution,
							format: imageFormat
						}
					)
				});

				// 通讯录 https://www.html5plus.org/doc/zh_cn/contacts.html
				document.getElementById("contact").addEventListener("tap", function() {
					mui.openWindow({
						url: "xingfudao_contact.html",
						id: "xingfudao_contact"
					})
				});

				// 显示图片
				function display(path) {
					var imgDiv = document.getElementById("img");
					var allImgExt = ".BMP|.JPG|.JPEG|.PNG|.GIF";
					// 将所选文件的扩展名截取并转为大写
					var extName = path.substring(path.lastIndexOf(".")).toUpperCase();
					if (allImgExt.indexOf(extName + "|") == -1) {
						// 视频文件
						imgDiv.innerHTML += '<video src="' + path +
							'" controls="" autoplay="autoplay" width="100%"></video>';
					} else {
						// 图片文件
						imgDiv.innerHTML += '<img src="' + path + '" width="100%"/>';
					}
				}
			});
		</script>
	</body>

</html>